<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
          <link href="78787888.css"  type="text/css" rel="stylesheet">
	</head>
	<body>
		<div>
		<ul class="layui-nav">
			<li class="layui-nav-item"></li>
			<li class="layui-nav-item"></li>
			<li class="layui-nav-item"></li>
		</ul>
		<img class="img" src="images/1.jpg" width="60%" height="400px">
		</div>
		<input class="ha" type="range" value="0" min="0" max="100" style="width: 40%; outline:none;">
		<span class="layui-breadcrumb" style="border: 3px solid #E3DDD8; border-right: none;">0</span><span class=".layui-breadcrumb" style="border: 3px solid #E3DDD8;border-left: none;">G</span>
		<div>0G</div>
		<div class="layui-progress-bar-0">25</div>
		<div class="layui-progress-bar-1">50</div>
		<div class="layui-progress-bar-2">75</div>
		<div class="layui-progress-bar-3">100G</div>


      
        <script src="text/lay/dest/layui.all.js"></script>
        <script src="../js/jquery-1.8.3.min.js"></script>
		<script>
			
            var haha=document.querySelector(".ha");	
        
			haha.onmousemove=function(){
		      this.nextElementSibling.innerHTML=this.value;
	    }
			
			
		   var x=1;//全局变量
	       window.onload=function(){					
			 setInterval("lunbo()",1200);
		}
		function lunbo(){			
			var li=document.getElementsByTagName("li");//变量取得li			   
				for(var i=0;i<3;i++){ //循环每个li					
					li[i].style.backgroundColor="#A59287";//设置li的颜色
				}				
				var img=document.getElementsByClassName("img")[0];//变量取得img				
				img.setAttribute("src","images/"+x+".jpg");//   方法变属性    				
				li[x-1].style.backgroundColor="mediumspringgreen";//对应图片的颜色				
				x++;//x+1			
				if(x>3){	//循环x到3再返回1
					x=1;
			}
		}
		</script>
	</body>
</html>
